<template>
    <div>数据管理
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="->">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>数据管理(三维扫描)</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <!-- 搜索区域 -->
        <el-row>
            <el-col :span="10">      
            <el-input placeholder="请输入搜索内容" v-model="advancedSearch.query" class="input-with-select" clearable 
            @clear ="getPatientList" @keyup.enter.native="searchPatient()">
                <el-select v-model="advancedSearch.select" slot="prepend" placeholder="请选择" size="medium"  autocomplete>
                    <el-option label="姓名" value="name"></el-option>
                    <!-- <el-option label="身份证号" value="IDnum"></el-option> -->
                    <el-option label="联系电话" value="phone"></el-option>
                </el-select>
                <el-button slot="append" type="primary" icon="el-icon-search" @click="searchPatient()">搜索</el-button>
            </el-input>
            </el-col>
        </el-row>
        
        <el-table :data="data" border stripe element-loading-text="拼命加载中">
            <el-table-column type="index"></el-table-column><!--  索引页  -->
            <el-table-column label="姓名" prop="name"></el-table-column><!--  索引页  -->
            <el-table-column label="性别" prop="sex" width="43px"></el-table-column><!--  索引页  -->
            <el-table-column label="年龄" prop="age" width="43px"></el-table-column><!--  索引页  -->
            <el-table-column label="出生日期" prop="birthDate" width="101px"></el-table-column><!--  索引页  -->
            <el-table-column label="身高" prop="height" width="50px"></el-table-column><!--  索引页  -->
            <el-table-column label="体重" prop="weight" width="50px"></el-table-column><!--  索引页  -->
            <el-table-column label="联系方式" prop="phone" width="113px"></el-table-column><!--  索引页  -->
            <el-table-column label="患者自诉" prop="selftalk"></el-table-column><!--  索引页  -->
            <el-table-column label="测量模式" prop="measureMode" width="100px"></el-table-column><!--  索引页  -->
            <el-table-column label="手术史" prop="historyofsurgery"></el-table-column>
            <el-table-column label="医生" prop="doctor"></el-table-column>
            <el-table-column label="设备" prop="deviceNum"></el-table-column>
            <el-table-column label="医院" prop="hospitalName"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="下载报告" placement="top">
                    <el-button type="primary" icon="el-icon-download"  size="mini" @click="downloadReport(scope.row)" 
                    v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在下载，请稍候"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="预览报告" placement="top">
                    <el-button type="primary" icon="el-icon-s-order"  size="mini" @click="previewReport(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page= "currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="tableData.length"
                >
            </el-pagination>
    </el-card>
    </div>  
</template>

<script>
export default {
    data(){
        return{
            advancedSearch:{
                select:"",
                query:"",     //查询信息
            },
            pageNum:1,    //当前页数
            pageSize:10,  //每页最大数
            // patientList:[],  //用户列表
            total:0, //总记录数
            currentPage: 1,
            tableData: [],
            fullscreenLoading: false,
            pdfUrl:"",
        }
    },
    created(){
       this.getPatientList();
    },
    methods: {
        async searchPatient(){
            const{data:res} = await this.$http.get("/hospital/searchPatient",{params:this.advancedSearch});
            this.tableData = res.patientInfo;
        },
        async getPatientList(){
            // this.patientList = [];
            this.tableData = [];
            const{data:res} =await this.$http.get("/hospital/getOwnPatient");
            this.tableData = res.patientInfo;
            // this.patientList = res;
        },
        //最大数
        handleSizeChange(newSize){
            // this.advancedSearch.pageSize = newSize;
            // this.getPatientList();
        },
        //pageNum的触发动作
        handleCurrentChange(newPage){
            this.currentPage = newPage;
            // this.getPatientList();
        },

        downloadReport(params){
            this.fullscreenLoading = true;
            let data = new URLSearchParams();
            data.append('filePath', params.filePath);
            const that = this;
            this.$http.post('/download/downloadPdf', data, {
                responseType: 'blob',
            }).then(res => {
                that.download(res, params.pdfName)
            })
        },

        download(res, fileName) {
            if(!res.data) {
                return;
            }
            const  blob = new Blob([res.data], {type: 'applicationf'});
            let url = window.URL.createObjectURL(blob);
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.download = decodeURIComponent(fileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url); // 释放掉blob对象
            setTimeout(() => {
                this.fullscreenLoading = false;
            }, 2000);
        },
        previewReport(params){
            let data = new URLSearchParams();
            data.append('filePath', params.filePath);
            // const that = this;
            this.$http.post('/download/downloadPdf', data, {
                responseType: 'blob',
            }).then(res => {
                const  blob = new Blob([res.data], {type: 'application/octet-stream'});
                this.pdfUrl = window.URL.createObjectURL(blob);
                window.open('../pdfjs/web/viewer.html?file=' + encodeURIComponent(this.pdfUrl));
            })
        },
        
    },
    computed:{
        data(){
            return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
        }
    }
    
}
</script>


<style lang="less" scoped>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 17px;
    
}
.el-select{
    width: 110px;
  }
.input-with-select{
    background-color: #fff;
  }

</style>